import React, { Component } from 'react'
// import Search from '../compenent/search'
import { NavBar, Icon,Carousel, WingBlank,Flex } from 'antd-mobile';
import SearchInput from '../search/index'
import myaxios from "../../utils/myaxios";
import "./index.scss";
import 'lib-flexible'
export default class Index extends Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
        swiper_list:[],
        List:[],
        productData:[]
      }
      handleImgClick=()=>{
        this.props.history.push("/goodList/query='123'");
      }
      handleSwiperClick=(goods_id)=>{
        
        this.props.history.push("/goodDetail/" + goods_id);
        }
      componentDidMount(){
          myaxios.get('home/swiperdata').then((res)=>{
              console.log(res);
            this.setState({
                swiper_list:res
            })
          }).catch((err)=>{
              console.log(err);
          })
          myaxios.get('home/catitems').then((res)=>{
            console.log(res);
          this.setState({
              List:res
          })
        }).catch((err)=>{
            console.log(err);
        })
        myaxios.get('home/floordata').then((res)=>{
          console.log(res);
        this.setState({
          productData:res
        })
      }).catch((err)=>{
          console.log(err);
      })
      }
    render() {
        return (
           <div className='ygshop'>
           {/* 首页导航条开始 */}
                <div className='nav-index'>
                    <NavBar>云购商城</NavBar>
                 </div>
           {/* 首页导航条结束 */}
              <div className='search-index'>
                <SearchInput></SearchInput>
              </div>
              {/* 导航条结束 */}
              {/* 轮播图开始 */}
              <div  className="yg-index-swiper">
              <Carousel
          autoplay={false}
          infinite
          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          afterChange={index => console.log('slide to', index)}
        >
          {this.state.swiper_list.map(val => (
            <div
              key={val.goods_id}
              onClick={this.handleSwiperClick.bind(this, val.goods_id)}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val.image_src}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </div>
          ))}
        </Carousel>
              </div>
              {/* 轮播图结束 */}
              {/* 列表页开始 */}
              <div className='yg-list'>
                <div className="catitems-item">
                <Flex>
                    {
                        this.state.List.map(v=>{
                            return <Flex.Item key={v.image_src} onClick={this.handleCatItemClick}>
                                <img src={v.image_src} alt=""/>
                            </Flex.Item>
                        })
                    }
                </Flex>
                  </div>
                </div>
              {/* 列表页结束 */}
              {/* 图片列表的开始 */}
              <div className='yg-index-productData'>
                  {
                    this.state.productData.map((v)=>{
                      return <div key={v.floor_title.image_src} className="productData-item">
                        {/* 标题的开始 */}
                        <div className="product-title">
                            <img src={v.floor_title.image_src} alt=""/>
                        </div>
                        {/* 标题的结束 */}
                        {/* 图片列表的开始 */}
                        <div className="product-image-list">
                            {
                                v.product_list.map(vv=>{
                                    return <div className="image-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                                        <img src={vv.image_src} alt=""/>
                                    </div>
                                })
                            }
                        </div>
                        {/* 图片列表的结束 */}


                      </div>
                    })
                  }
              </div>
              {/* 图片列表的结束 */}

           </div>

           
        )
        
    }
}
